<script setup lang="ts">
import CrudPage from "@/components/CrudPage/index.vue";
import {
  getModuleTableList,
  getModuleTableDetails,
  updateModuleTable,
  ModuleTable,
  createModuleTable
} from "@/views/domain/devtools/api/moduleTable";

import { ref } from "vue";
import { useModuleTableProvider } from "./provider";
import { useRouter } from "vue-router";

const query = ref<Record<string, any>>({});
const { columns, crudViewRef } = useModuleTableProvider();
const router = useRouter();

const onShouldLoadData = async (
  pgs: any
): Promise<{ list: ModuleTable[]; total?: number }> => {
  const { data } = await getModuleTableList(pgs);
  return data;
};

const generateEdit = (row: ModuleTable) => {
  router.push({
    name: "DevtoolsGen",
    query: { domain: row.domain, className: row.className }
  });
};
</script>

<template>
  <div>
    <CrudPage
      ref="crudViewRef"
      title="模块域"
      row-key="id"
      :create="{
        viewType: 'drawer',
        labelPosition: 'top',
        rowProps: { gutter: 20 },
        colProps: { span: 12 }
      }"
      :edit="{
        viewType: 'dialog',
        labelPosition: 'top',
        rowProps: { gutter: 20 },
        colProps: { span: 12 }
      }"
      :columns="columns"
      child-field="children"
      :get-data-list="onShouldLoadData"
      @edit-confirm="updateModuleTable"
      @create-confirm="createModuleTable"
    >
      <template #operation="{ row, edit }">
        <el-button type="text" @click="edit(row)">编辑</el-button>
        <el-button type="text" @click="generateEdit(row)">生成</el-button>
        <el-button type="text">删除</el-button>
      </template>
      <template #toolbar-action>
        <el-button type="primary">导入</el-button>
      </template>
    </CrudPage>
  </div>
</template>
<style lang="scss" scoped></style>
